<template>
  <div class="echarts-outer-wrapper flex-cloumn width-410">
    <div @click="ItemRightTopBtn()" style="cursor: pointer">
      <Title title="税费收入" time="2" dw="单位：亿元"></Title>
    </div>
    <div class="chart-container flex1">
      <div class="chart" ref="echart"></div>
      <!-- 底座背景 -->
      <div class="bg"></div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/title";
import * as echarts from "echarts";
import "echarts-gl";
import { getPie3D, getParametricEquation } from "./pieChart";
const color = ["#5279fd", "#f8d283", "#92ec51"];

export default {
  name: "sstjys",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: "",
      yearDate: "",
      optionData: [],
      statusChart: null,
      option: {},
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
    this.yearDate = year;
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.echart);
    this.ajax({
      url: "/dpzsSycxService/sstjysQuery",
      method: "post",
      data: {
        param: {
          tjnd: this.yearDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.optionData = [
        {
          name: "税收收入",
          value: Number(res.data.sssr),
        },
        {
          name: "非税收入",
          value: Number(res.data.fssr),
        },
        {
          name: "社会保险基金收入",
          value: Number(res.data.sbfsr),
        },
      ];
      this.setLabel();
      this.initEchart();
    });
  },
  methods: {
    ItemRightTopBtn() {
      this.$router.push("/shouru");
    },
    setLabel() {
      this.optionData.forEach((item, index) => {
        item.itemStyle = {
          color: color[index],
        };
        item.label = {
          normal: {
            show: true,
            position: "inside",
            color: color[index],
            formatter: ["{d|{d}%}"].join("\n"), // 用\n来换行
            rich: {
              d: {
                color: "#ffffff",
                align: "left",
                fontSize: 17,
              },
            },
          },
        };
        item.labelLine = {
          show: false,
        };
      });
    },
    // 图表初始化
    initEchart() {
      this.myChart.clear();
      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细 第二个参数传0就是饼图
      this.option = getPie3D(this.optionData, 0, 320, 36, 26, 0.8);
      this.myChart.setOption(this.option);
      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      this.option.series.push({
        name: "税务状态", //自己根据场景修改
        backgroundColor: "transparent",
        type: "pie",
        label: {
          opacity: 1,
          fontSize: 14,
          lineHeight: 20,
        },
        startAngle: -40, // 起始角度，支持范围[0, 360]。
        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["20%", "64%"],
        center: ["31%", "48%"],
        data: this.optionData,
        itemStyle: {
          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
        },
      });
      this.myChart.setOption(this.option);
    },
  },
};
</script>

<style scoped lang="scss">
.echarts-outer-wrapper {
  width: 458px;
  height: 314px;
}
.chart-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.chart,
.bg {
  position: relative;
  z-index: 99;
  width: 100%;
  height: 100%;
}

.bg {
  position: absolute;
  bottom: 24px;
  left: 22px;
  z-index: 1;
  width: 232px;
  height: 96px;
  background: url("~@/assets/images/bg-3d-1.png") no-repeat;
  background-size: 100% 100%;
}
</style>
